<template>
	<div>
		<div class="chunk">
			<div class="title">基础信息</div>
			<div class="container_detail">
				<FormItems
					labelWidth="100px"
					ref="form"
					v-model="info"
					:form="formList"
					state="readonly">
					<template #businessCode="scope">
						<el-link
							type="primary"
							@click="toDetail(scope.row)"
							v-if="notEmpty(scope.row.businessCode)">
							{{ scope.row.businessCode }}
						</el-link>

						<span v-if="Empty(scope.row.businessCode)">-</span>
					</template>
				</FormItems>
			</div>
		</div>
	</div>
</template>
<script>
	import * as jump from '@/api/finance/manage/collect/api.js';
	import { Params } from '@/api/finance/reimburs/list/api.js';
	import FormItems from '@/views/finance/manage/formItems/index.vue';
	export default {
		name: '',
		components: { FormItems },
		mixins: [],
		props: {
			value: {
				type: Object,
				required: true,
			},
			state: {
				required: false,
			},
		},

		data() {
			return {};
		},
		computed: {
			info: {
				get() {
					return this.useVModel.call(this);
				},

				set(val) {
					this.$emit('input', val);
				},
			},
			formList() {
				return [
					{
						label: '应付单号：',
						prop: 'paymentCode',
					},
					{
						label: '应付类型：',
						prop: 'paymentTypeStr',
					},

					{
						label: '申请人：',
						prop: 'applyUserName',
					},
					{
						label: '所属组织：',
						prop: 'deptName',
					},
					{
						label: '费用所属公司：',
						prop: 'costCompanyName',
					},
					{
						label: '申请时间：',
						format: row => {
							return this.A_formatTime(row.applyTime, 0);
						},
					},
					{
						label: '客户编号：',
						prop: 'businessCustomerCode',
					},
					{
						label: '业务单号：',
						type: 'empty',
						slot: 'businessCode',
						// prop: "businessCode",
					},
					{
						label: '应付时间：',
						format: row => {
							return this.A_formatTime(row.paymentTime, 0);
						},
					},
					{
						label: '应付金额：',
						prop: 'paymentAmount',
						format: row => {
							return this.format_thousand(row.paymentAmount);
						},
					},
					{
						label: '已付金额：',
						prop: 'prepaidAmount',
						format: row => {
							return this.format_thousand(row.prepaidAmount);
						},
					},
					{
						label: '应付状态：',
						prop: 'paymentStatusStr',
					},
				];
			},
		},
		watch: {},
		mounted() {},
		methods: {
			getoutChangeRentParam(orderCode) {
				if (this.Empty(orderCode)) return Promise.reject();
				return new Promise((resolve, reject) => {
					jump.outChangeRentParam({ code: orderCode }).then(res => {
						if (res.code == 200 && this.notEmpty(res.data)) {
							resolve(res.data);
						} else {
							reject(res);
						}
					});
				});
			},
			getParams(businessCode) {
				return new Promise((resolve, reject) => {
					Params(businessCode)
						.then(res => {
							if (res.code == 200) {
								resolve(res.data);
							} else {
								throw new Error(res.msg);
							}
						})
						.catch(err => {
							reject(err);
						});
				});
			},
			async toDetail(row) {
				try {
					this.$modal.loading('正在跳转中，请稍后...');
					let {
						businessCode,
						paymentType,
						businessId,
						purchaseOrderId,
						flowId,
						purchaseSource,
					} = row;
					if (this.Empty(paymentType)) return;
					let route = {};
					switch (paymentType?.toString()) {
						// 报销
						case '1':
							if (!businessId) break;
							route = {
								path: '/finance/previewReimburs',
								name: 'PreviewReimburs',
								query: {
									id: businessId,
									type: 'preview',
									flowId,
								},
							};
							break;
						// 车辆采购尾款应付款
						case '2':
							if (!purchaseOrderId) break;
							if (purchaseSource == 2) {
								route = {
									name: 'OrderPurchase',
									query: {
										purchaseOrderId,
										type: 'detail',
										pageType: '订单采购详情',
									},
								};
							} else {
								route = {
									name: 'PurchaseAdd',
									query: {
										purchaseOrderId,
										type: 'detail',
										pageType: '采购详情',
									},
								};
							}
							break;
						// 车辆采购定金应付款
						case '3':
							if (!purchaseOrderId) break;
							if (purchaseSource == 2) {
								route = {
									name: 'OrderPurchase',
									query: {
										purchaseOrderId,
										type: 'detail',
										pageType: '订单采购详情',
									},
								};
							} else {
								route = {
									name: 'PurchaseAdd',
									query: {
										purchaseOrderId,
										type: 'detail',
										pageType: '采购详情',
									},
								};
							}
							break;
						// 车辆外部转租赁首付款
						case '4':
							if (!businessCode) break;
							var params = await this.getoutChangeRentParam(
								businessCode,
							);
							route = {
								name: 'SubleaseView',
								query: {
									type: 'view',
									id: params.id,
								},
							};
							break;
						// 车辆外部转租赁保证金
						case '5':
							if (!businessCode) break;
							var params = await this.getoutChangeRentParam(
								businessCode,
							);
							route = {
								name: 'SubleaseView',
								query: {
									type: 'view',
									id: params.id,
								},
							};
							break;
						// 新车投保
						case '6':
							if (/^BX.*/g.test(businessCode)) {
								var params = await this.getParams(businessCode);
								// 单推
								route = {
									path: '/cwgd/newCarInsuranceDetails',
									name: 'NewCarInsuranceDetails',
									query: {
										id: params.id,
										carId: params.carId,
										channels: params.insuranceChannels,
										businessDataId: params.businessDataId,
										flowId: params?.flowId || null,
										type: 'view',
									},
								};
							}
							if (/^PCHBX.*/g.test(businessCode)) {
								if (!flowId) {
									this.$message.error('未查找到相关流程！');
									break;
								}
								// 批量
								route = {
									path: '/workflow/examine/details',
									name: 'Details',
									query: {
										processId: flowId,
										flag: '1',
										status: 'readonly',
									},
								};
							}

							break;
						// 保险变更
						case '7':
							if (!businessId) break;
							route = {
								name: 'InsureManageDetails',
								query: {
									id: businessId,
								},
							};
							break;
						// 保险理赔
						case '8':
							var params = await this.getParams(businessCode);
							if (/^WX.*/g.test(businessCode)) {
								route = {
									name: 'MaintenanceDetails',
									query: {
										id: params.id,
										type: 'view',
										carId: params.carId,
										businessDataId: params.businessDataId,
										flowId: params.flowId,
									},
								};
							}
							if (/^BXLP.*/g.test(businessCode)) {
								route = {
									name: 'SettlementDetails',
									query: {
										id: businessId,
										type: 'view',
									},
								};
							}

							break;
						// 车辆采购全款应付款;
						case '9':
							if (!purchaseOrderId) break;
							if (purchaseSource == 2) {
								route = {
									name: 'OrderPurchase',
									query: {
										purchaseOrderId,
										type: 'detail',
										pageType: '订单采购详情',
									},
								};
							} else {
								route = {
									name: 'PurchaseAdd',
									query: {
										purchaseOrderId,
										type: 'detail',
										pageType: '采购详情',
									},
								};
							}
							break;
						// GPS续费
						case '10':
							var params = await this.getParams(businessCode);
							route = {
								name: 'GPSRenewal',
								query: {
									// data: row,
									carIds: params.carId,
									workOrderType: params.workOrderType,
									type: 'disabled',
									pageType: 'GPS续费工单详情',
								},
							};
							break;
						// GPS维修
						case '11':
							var params = await this.getParams(businessCode);
							route = {
								name: 'GPSFix',
								query: {
									// data: row,
									carIds: params.carId,
									workOrderType: params.workOrderType,
									type: 'disabled',
									pageType: 'GPS维修工单详情',
								},
							};
							break;
						// GPS拆除
						case '12':
							var params = await this.getParams(businessCode);
							route = {
								name: 'GPSRemove',
								query: {
									// data: row,
									carIds: params.carId,
									workOrderType: params.workOrderType,
									type: 'disabled',
									pageType: 'GPS拆除工单详情',
								},
							};
							break;
						// 处置金应付
						case '13':
							route = {};
							break;
						case '15':
							var params = await this.getParams(businessCode);
							route = {
								name: 'DeliveryVehicleDetails',
								query: {
									id: businessId,
									flowId: flowId,
								},
							};
							break;
						case '16':
							if (row.isPc === true) {
								// 批量
								route = {
									name: 'ReturnMarginMerge',
									query: {
										id: businessId,
										flowId: flowId,
										type: 'view',
									},
								};
							}
							if (row.isPc === false) {
								// 单个
								route = {
									name: 'ReturnMarginDetails',
									query: {
										id: businessId,
										flowId: flowId,
									},
								};
							}
							break;
						case '17':
							route = {
								name: 'PickUpTheCarDetail',
								query: {
									id: businessId,
									type: 'detail',
								},
							};
							break;
						case '18':
						case '19':
							if (row.contractChangeType == 1) {
								//  主订单变更
								route = {
									name: 'ContractChangePreview',
									query: {
										orderChangeId: businessId,
									},
								};
							} else if (row.contractChangeType == 2) {
								// 主订单变更
								route = {
									name: 'MinContractChangePreview',
									query: {
										orderCarChangeId: businessId,
									},
								};
							} else {
								throw new Error();
							}
							break;

						default:
							this.$modal.closeLoading();
							setTimeout(() => {
								this.$message.error(
									`未配置${row.paymentTypeStr}跳转`,
								);
							}, 800);
							break;
					}
					this.$modal.closeLoading();
					if (this.notEmpty(route)) {
						this._toPage(route);
					}
				} catch (error) {
					this.$modal.closeLoading();
					setTimeout(() => {
						this.$message.error(`未查找到相关订单信息！`);
					}, 800);
				}
			},
		},
	};
</script>
<style lang="scss" scoped>
	.chunk {
		overflow: hidden;
		background-color: #fff;
		border-radius: 4px;
		padding: 15px 20px;
		margin: 20px;
		box-sizing: border-box;
		.title {
			border-bottom: 1px solid #e9e9e9;
			padding-bottom: 15px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 16px;
			color: #333333;
			line-height: 22px;
			text-align: left;
			font-style: normal;
		}
		// .container_detail {
		//     display: grid;
		//     grid-template-columns: repeat(3, minmax(0, 1fr));
		//     padding: 25px 0;
		//     gap: 25px;
		//     .item {
		//         display: flex;
		//         font-size: 16px;
		//         // align-items: center;
		//         font-size: 14px;
		//         .label {
		//             margin-right: 10px;
		//             vertical-align: middle;
		//             width: 80px;
		//             font-family: PingFangSC, PingFang SC;
		//             font-weight: 400;
		//             font-size: 14px;
		//             color: #8c8c8c;
		//             line-height: 20px;
		//             text-align: left;
		//             font-style: normal;
		//             white-space: nowrap;
		//         }
		//         .content {
		//             font-family: PingFangSC, PingFang SC;
		//             font-weight: 400;
		//             font-size: 14px;
		//             color: #333333;
		//             line-height: 20px;
		//             text-align: left;
		//             font-style: normal;
		//         }
		//     }
		// }
		.container_invoice {
			display: flex;
			margin-bottom: 15px;
			.preview {
				flex: 1;
				// width: 300px;
				display: flex;
				flex-direction: column;
				align-items: center;
				.container_preview {
					padding: 25px 0;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					// margin-top: 25px;
					width: 180px;
					.image {
						aspect-ratio: 16/9;
					}
					.handleBtn {
						display: flex;
						justify-content: space-around;
					}
				}
			}
			.container_detail {
				flex: 2;
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}
	}
	.empty {
		font-size: 14px;
		text-align: center;
		padding: 20px;
	}
</style>
